<template>
  <el-tabs
    type="border-card"
    style="margin: 0 20px; height: 93vh"
    v-model="activeName"
  >
    <el-tab-pane label="历史数据" name="历史数据">
      <el-form inline :model="form">
        <el-form-item label="开始时间">
          <el-date-picker
            type="date"
            placeholder="选择开始时间"
            size="mini"
            v-model="form.startTime"
            :picker-options="startTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            type="date"
            placeholder="选择结束时间"
            size="mini"
            v-model="form.endTime"
            :picker-options="endTimePicker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="search(1)">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="warning"
            size="mini"
            @click="exportExcel('#tab', '气象历史数据')"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="tableData" id="tab" >
        <el-table-column
          prop="label"
          label="监测站点"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sensorNo"
          label="传感器编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sensorValue"
          label="雨量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="theDate"
          label="采集时间"
          align="center"
        ></el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-col :span="10">
          <el-pagination
            background
            :current-page="pageData.currentPage"
            layout="total, prev, pager, next, jumper"
            :total="pageData.count"
            :page-size="pageData.pageSize"
            @current-change="handleCurrentChange"
            v-if="pageData.count && pageData.count != 0"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import * as serviceApi from "../../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "QiXiang",
  props: {
    node: Object,
  },
  data() {
    return {
      activeName: "历史数据",
      form: {
        startTime: moment().subtract(3, "month").format("YYYY-MM-DD"),
        endTime: moment().format("YYYY-MM-DD"),
      },
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.startTime
            ? time.getTime() < new Date(this.form.startTimeMin).getTime() ||
              time.getTime() > new Date(this.form.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form.startTime).getTime()
            : false,
      };
    },
  },
   created() {
    let queryData = {
      startTime: this.form.startTime,
      endTime: moment().format("YYYY-MM-DD"),
    };
    Axios({
      url: serviceApi.KB_API,
      method: "post",
      data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"startTime\\":\\"${this.form.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"page\\":{\\"currentPage\\":1,\\"pageSize\\":10}}","serviceCode":"queryYangGuangHourHistory","timestamp":"","uuid":""}`,
    }).then((res) => {
      this.pageData = res.data.parameter.page;
      this.queryWeatherHisData(res.data.parameter.list);
    });
  },
  methods: {
    exportExcel(dom, title) {
      /* out-table关联导出的dom节点  */
      var wb = XLSX.utils.table_to_book(document.querySelector(dom));
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `${this.node.label}${title}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    queryWeatherHisData(list) {
      for (let i = 0; i < list.length; i++) {
        list[i].label = this.node.label;
        list[i].sensorValue = list[i].sensorValue.toFixed(1);
        list[i].theDate = moment(list[i].theDate).format("YYYY-MM-DD HH:mm:ss");
      }
      this.tableData = list;
    },
    search(currentPage) {
      let queryData = {
        startTime:moment(this.form.startTime).format("YYYY-MM-DD"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD"),
      };
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"startTime\\":\\"${queryData.startTime}\\",\\"endTime\\":\\"${queryData.endTime}\\",\\"page\\":{\\"currentPage\\":${currentPage},\\"pageSize\\":10}}","serviceCode":"queryYangGuangHourHistory","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.pageData = res.data.parameter.page;
        this.queryWeatherHisData(res.data.parameter.list);
      });
    },
    handleCurrentChange(val) {
      this.search(val);
    },
  },
 
};
</script>
<style lang="less" scoped>
.el-table {
  display: block;
  height: 66vh;
  overflow: auto;
  margin-bottom: 40px;
}
.el-table::before {
  z-index: inherit;
}
</style>